<template>
	<div
		class="container"
		v-if="detail && detail.amount > 0"
		v-loading="loading"
	>
		<p class="mb-10 date">
			{{ label }}：{{
				dayjs(String(detail.startDate)).format('YYYY/MM/DD')
			}}
			～
			{{ dayjs(String(detail.endDate)).format('YYYY/MM/DD') }}
		</p>
		<div class="border dividends-title mb-20">
			总实发分红：
			<span class="fwb amount">
				{{ handleNumber('USDT', detail.actAmount, 2) }}
			</span>
			<span v-if="detail.actAmount != detail.amount">
				(应发分红:
				{{ handleNumber('USDT', detail.amount, 2) }})
			</span>
		</div>
		<div class="dividends-content mb-20">
			<div
				class="border item"
				v-for="(item, index) in detail.details.filter(
					(item) => item.amount > 0
				)"
				:key="index"
			>
				<div>
					<div class="title mb-20">
						{{ venueTypeMap[item.venueTypeCode] || '-' }}
					</div>
					<div class="list">
						<div class="item1">
							<div class="label">应发分红</div>
							<div
								class="num"
								:style="handleNumberColor(item.amount)"
							>
								<span v-if="item.amount > 0">+</span>
								{{ handleNumber('USDT', item.amount) }}
							</div>
						</div>
						<div>=</div>
						<div class="item1">
							<div class="label">有效投注</div>
							<div
								class="num"
								:style="handleNumberColor(item.validBetAmount)"
							>
								<span v-if="item.validBetAmount > 0">+</span>
								{{ handleNumber('USDT', item.validBetAmount) }}
							</div>
						</div>
						<div>x</div>
						<div class="item1">
							<div class="label">分红比例</div>
							<div
								class="num"
								:style="handleNumberColor(item.rate)"
							>
								{{ item.rate }}%
							</div>
						</div>
						<div>x</div>
						<div class="item1">
							<div class="label">平台占成比例</div>
							<div class="num">{{ item.platRate }}%</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
export default {
  mixins: [list],
  props: {
    label: {
      type: String,
      default: '本期分红周期'
    },
    startDate: {
      type: String | Number,
      default: ''
    },
    endDate: {
      type: String | Number,
      default: ''
    },
    proxyId: {
      type: String | Number,
      default: ''
    }
  },
  data() {
    return {
      dayjs,
      venueTypeMap: {
        ty: '体育',
        zr: '真人',
        dj: '电竞',
        qp: '棋牌',
        cp: '彩票',
        by: '捕鱼',
        dy: '电子',
        qkl: '区块链'
      },
      detail: {}
    }
  },
  methods: {
    loadData() {
      const params = {
        startDate: this.startDate,
        endDate: this.endDate,
        proxyId: this.proxyId,
		venueOrderMap: {
			ty: 1,
			dj: 2,
			qp: 3,
			cp: 4,
			dy: 5,
			zr: 6
		}
      }
      this.loading = true
      this.$api
        .reportProxyTeamBillRebate(params)
        .then((res) => {
          this.loading = false
          if (res.code === 200) {
            this.detail = res.data
          }
        })
        .catch(() => {
          this.loading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
	.border {
		border: 1px solid #ccc;
		border-radius: 5px;
	}
	.num {
		font-weight: 500;
		margin-top: 5px;
	}
	.m-20 {
		margin: 20px;
	}
	.mb-10 {
		margin-bottom: 10px;
	}
	.mb-20 {
		margin-bottom: 20px;
	}
	.date {
		font-size: 14px;
	}
	.fwb {
		font-weight: bold;
	}
	.amount {
		font-size: 18px;
	}
	.dividends-title {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20px 0;
		font-size: 14px;
	}
	.dividends-content {
		display: flex;
		flex-wrap: wrap;
		.item {
			margin-bottom: 20px;
			padding: 20px;
			width: 49%;
			&:nth-child(2n + 1) {
				margin-right: 2%;
			}
			.title {
				font-size: 16px;
				font-weight: bold;
			}
			.list {
				display: flex;
				justify-content: space-around;
				align-items: center;
				.item1 {
					text-align: center;
					.label,
					.num {
						font-size: 14px;
					}
				}
			}
		}
	}
}
</style>
